<style>
.el-carousel__item img {
    width: 100%;
    height: 462px;
}
</style>

<style scoped lang='scss'>
.wrapper {
    width: 100%;
    // margin: 0 auto;
    // height: 827px;
    // padding: 80px 0 80px 0;
    .banner-group {
        width: 100%;
        height: 462px;
    }
    .case-wrapper {
        width: 100%;
        padding-top: 80px;
        padding-bottom: 60px;
        background-image: url('../assets/index/餐饮行业全场景_bg.png');
        // background-size: 100%;
        background-repeat: no-repeat;
        .case-container {
            // width: 1100px;
            width: 80%;
            margin: 0 auto;
            .case-header-group {
                text-align: center;
                .header-title {
                    height: 40px;
                    font-size: 40px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(13, 26, 38, 1);
                    line-height: 40px;
                    margin-bottom: 15px;
                }
                .header-little {
                    height: 20px;
                    font-size: 20px;
                    font-family: PingFangSC-Light, PingFang SC;
                    font-weight: 300;
                    color: rgba(13, 26, 38, 1);
                    line-height: 20px;
                }
            }
            .case-content-group {
                display: flex;
                margin-top: 60px;
                .case-content-left {
                    li {
                        padding: 40px 50px 40px 40px;
                        margin-bottom: 20px;
                        width: 490px;
                        height: 164px;
                        background: rgba(255, 255, 255, 1);
                        border-radius: 4px;
                        box-sizing: border-box;
                        position: relative;
                        &:hover {
                            box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
                        }
                        .content-title {
                            height: 20px;
                            font-size: 20px;
                            font-family: PingFangSC-Semibold, PingFang SC;
                            font-weight: 600;
                            color: rgba(13, 26, 38, 1);
                            line-height: 20px;
                            &:hover {
                                color: rgba(47, 84, 235, 1);
                            }
                        }
                        .content-content {
                            margin-top: 20px;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(102, 102, 102, 1);
                            line-height: 22px;
                        }
                        p {
                            position: absolute;
                            right: 30px;
                            bottom: 104px;
                            width: 39px;
                            height: 40px;
                            font-size: 40px;
                            font-family: DINAlternate-Bold, DINAlternate;
                            font-weight: bold;
                            color: rgba(233, 240, 255, 1);
                            line-height: 40px;
                        }
                    }
                }
                .case-content-right {
                    width: 430px;
                    height: 366px;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.05);
                    border-radius: 4px;
                    margin-left: 180px;
                    padding: 40px 55px 58px 55px;
                    box-sizing: border-box;
                    margin-top: 60px;
                    .contact-title {
                        width: 80px;
                        height: 16px;
                        font-size: 20px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(13, 26, 38, 1);
                        line-height: 16px;
                    }
                    input {
                        margin-top: 30px;
                        width: 320px;
                        height: 38px;
                        background: rgba(255, 255, 255, 1);
                        border: 1px solid rgba(221, 223, 230, 1);
                        padding: 12px 14px;
                        box-sizing: border-box;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(186, 189, 200, 1);
                    }
                    .join {
                        margin-top: 30px;
                        width: 320px;
                        height: 38px;
                        background: rgba(47, 84, 235, 1);
                        text-align: center;
                        cursor: pointer;
                        span {
                            width: 56px;
                            height: 14px;
                            font-size: 14px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: rgba(255, 255, 255, 1);
                            line-height: 38px;
                        }
                    }
                }
            }
        }
    }
    .custom-wrapper {
        width: 100%;
        height: 714px;
        background: rgba(57, 65, 96, 1);
        padding-top: 80px;
        box-sizing: border-box;
        .title {
            // text-align: center;
            margin: 0 auto;
            width: 454px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 40px;
        }
        .tab-container {
            padding-top: 50px;
            padding-bottom: 80px;
            overflow: hidden;
            .tab-title {
                display: flex;
                width: 736px;
                height: 37px;
                margin: 0 auto;
                justify-content: space-around;
                border-bottom: 1px solid rgba(92, 99, 122, 1);
                box-sizing: border-box;
                li {
                    // height: 16px;
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    // line-height: 16px;
                    padding-bottom: 27px;
                    &.active {
                        border-bottom: 3px solid rgba(47, 84, 235, 1);
                    }
                }
            }
            .tab-group {
                width: 900px;
                margin: 50px auto 0;
                height: 370px;
                position: relative;
                // overflow: hidden;
                // display: flex;
                // flex-wrap: wrap;
                // justify-content: space-between;
                .left-arrow {
                    width: 64px;
                    height: 64px;
                    position: absolute;
                    left: -120px;
                    top: 153px;
                    background-image: url('../assets/index/上一个.png');
                    z-index: 1;
                }
                .right-arrow {
                    width: 64px;
                    height: 64px;
                    position: absolute;
                    left: 950px;
                    top: 153px;
                    background-image: url('../assets/index/下一个.png');
                    z-index: 1;
                }
                .tab-ul {
                    overflow: hidden;
                    width: 9304px;
                    height: 370px;
                    position: absolute;
                    left: -976px;
                    transition-duration: 0.5s;
                    // :first-child {
                    //     margin: ;
                    // }
                    li {
                        float: left;
                        width: 900px;
                        height: 370px;
                        border-radius: 10px;
                        background: rgba(255, 255, 255, 1);
                        margin-right: 76px;
                        display: flex;
                        overflow: hidden;
                        border: none;
                        .desc-img {
                            width: 450px;
                            height: 370px;
                        }
                        .desc-group {
                            width: 450px;
                            padding: 60px 50px;
                            // box-sizing: border-box;
                            p {
                                // width: 176px;
                                height: 30px;
                                font-size: 22px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                color: rgba(13, 26, 38, 1);
                                line-height: 30px;
                                margin-bottom: 25px;
                            }
                            .desc {
                                width: 360px;
                                height: 72px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(102, 102, 102, 1);
                                line-height: 24px;
                            }
                        }
                    }
                }
            }
        }
    }
    .team-wrapper {
        width: 100%;
        height: 580px;
        background: rgba(255, 255, 255, 1);
        padding: 80px 0;
        box-sizing: border-box;
        overflow: hidden;
        p {
            width: 160px;
            height: 40px;
            font-size: 40px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(13, 26, 38, 1);
            line-height: 40px;
            margin: 0 auto 80px;
        }
        .teammates {
            // width: 910px;
            margin: 0 auto;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            // justify-content: space-between;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            li {
                transition-duration: 0.5s;
                margin-top: 400px;
                .liu {
                    width: 280px;
                    height: 300px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 2px;
                    border: 1px solid rgba(221, 223, 230, 1);
                    margin-right: 40px;
                    // padding: 40px 86px 60px;
                    box-sizing: border-box;
                    &:hover {
                        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
                    }
                }
                .tro {
                    .touxiang {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        background-color: rgba(186, 189, 200, 1);
                        margin: 40px auto 0;
                    }
                    .name {
                        margin: 0 auto;
                        padding: 40px 0 20px;
                        width: 40px;
                        height: 20px;
                        font-size: 20px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(13, 26, 38, 1);
                        line-height: 20px;
                    }
                    .zhiye {
                        width: 108px;
                        height: 20px;
                        font-size: 18px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                        line-height: 20px;
                        margin: 0 auto;
                    }
                }
                .detail {
                    margin-top: 100px;
                    p {
                        width: 40px;
                        height: 20px;
                        font-size: 20px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(13, 26, 38, 1);
                        line-height: 20px;
                        margin: 50px auto 30px;
                    }
                    .content {
                        width: 240px;
                        height: 120px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(102, 102, 102, 1);
                        line-height: 24px;
                        margin: 0 auto;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;
                    }
                }
            }
        }
    }
    .friends-wrapper {
        width: 100%;
        padding: 80px 0 60px;
        box-sizing: border-box;
        background-image: url('../assets/index/合作伙伴_bg.png');
        .friends-container {
            width: 1180px;
            margin: 0 auto;
            .title {
                width: 160px;
                height: 40px;
                font-size: 40px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(13, 26, 38, 1);
                line-height: 40px;
                margin: 0 auto;
            }
            .little {
                width: 201px;
                height: 20px;
                font-size: 20px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(13, 26, 38, 1);
                line-height: 20px;
                margin: 20px auto 87px;
            }
            .company-list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .company-img {
                    width: 220px;
                    height: 90px;
                    background: rgba(255, 255, 255, 1);
                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
                    border-radius: 4px;
                    // margin-right: 20px;
                    margin-bottom: 20px;
                }
            }
            .more {
                width: 154px;
                height: 52px;
                border-radius: 26px;
                border: 2px solid rgba(13, 26, 38, 1);
                text-align: center;
                line-height: 52px;
                margin: 60px auto 0;
                .span {
                    width: 80px;
                    height: 20px;
                    font-size: 20px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: rgba(13, 26, 38, 1);
                }
            }
        }
    }
}
</style>


<template>
    <div class="wrapper">
        <contactButton></contactButton>
        <div class="banner-group" id="banner-group">
            <el-carousel trigger="click" height="462px">
                <!-- <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523588994_243.jpg" alt="">
                    </a>
                </el-carousel-item> -->
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1523504442_455.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1521444982_469.jpg" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1522742329_629.png" alt="">
                    </a>
                </el-carousel-item>
                <el-carousel-item>
                    <a href="#">
                        <img src="https://static-image.xfz.cn/1525669927_166.jpg" alt="">
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="case-wrapper">
            <div class="case-container">
                <div class="case-header-group">
                    <div class="header-title">餐饮行业全场景解决方案</div>
                    <div class="header-little">匠把头微信小程序</div>
                </div>
                <div class="case-content-group">
                    <ul class="case-content-left">
                        <li>
                            <div class="content-title">
                                <span>3分钟搭建移动商城</span>
                            </div>
                            <div class="content-content">
                                <span>深挖行业特点，数十套行业模板</span>
                            </div>
                            <p>01</p>
                        </li>
                        <li>
                            <div class="content-title">
                                <span>3分钟搭建移动商城</span>
                            </div>
                            <div class="content-content">
                                <span>深挖行业特点，数十套行业模板</span>
                            </div>
                            <p>02</p>
                        </li>
                        <li>
                            <div class="content-title">
                                <span>3分钟搭建移动商城</span>
                            </div>
                            <div class="content-content">
                                <span>深挖行业特点，数十套行业模板</span>
                            </div>
                            <p>03</p>
                        </li>
                    </ul>
                    <div class="case-content-right">
                        <div class="contact-title">免费咨询</div>
                        <input type="text" placeholder="对您的称呼">
                        <input type="text" placeholder="联系电话">
                        <input type="text" placeholder="意向回访时间">
                        <div class="join" @click="onJoin"><span>我要加入</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="custom-wrapper">
            <p class="title">定制化开发 全栈解决方案</p>
            <div class="tab-container">
                <ul class="tab-title" ref="titleUL">
                    <li v-for="(item,index) of titleList" :key="item" :class="index==currentIndex?'active':''" @click="onLiClick(index)">{{item}}</li>
                </ul>
                <div class="tab-group">
                    <div class="left-arrow" @click="onLeftClick"></div>
                    <div class="right-arrow" @click="onRightClick"></div>
                    <ul class="tab-ul" ref="tabUL">
                        <li>
                            <div class="desc-group">
                                <p>app设计与开发</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                            <div class="desc-img"><img src="../assets/index/app设计与开发.png" alt=""></div>
                        </li>
                        <li>
                            <img src="../assets/index/物联网建设.png" alt="">
                            <div class="desc-group">
                                <p>物联网建设</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                        </li>
                        <li>
                            <img src="../assets/index/定制网站建设服务.png" alt="">
                            <div class="desc-group">
                                <p>定制网站建设服务</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                        </li>
                        <li>
                            <img src="../assets/index/小程序定制化开发.png" alt="">
                            <div class="desc-group">
                                <p>小程序定制化开发</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                        </li>
                        <li>
                            <img src="../assets/index/公众号定制化开发.png" alt="">
                            <div class="desc-group">
                                <p>公众号定制化开发</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                        </li>
                        <li>
                            <div class="desc-group">
                                <p>app设计与开发</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                            <img src="../assets/index/app设计与开发.png" alt="">
                        </li>
                        <li>
                            <img src="../assets/index/物联网建设.png" alt="">
                            <div class="desc-group">
                                <p>物联网建设</p>
                                <div class="desc">响应式网站建设，PC端移动端多合一，功能完善，涵盖大部分主流网站效果，功能完善，涵盖大部分主流网站效果，内容可按用户需求轻松添加，花更少的钱做更划算的网站</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="team-wrapper">
            <p>团队实力</p>
            <ul class="teammates">
                <li @mouseenter="listenTroHover" @mouseleave="listenTroLeave" ref="troli">
                    <div class="tro liu">
                        <div class="touxiang"></div>
                        <p class="name">姓名</p>
                        <p class="zhiye">团队技术总监</p>
                    </div>
                    <div class="detail liu">
                        <p class="name">姓名</p>
                        <div class="content">具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验</div>
                    </div>
                </li>
                <li>
                    <div class="tro liu">
                        <div class="touxiang"></div>
                        <p class="name">姓名</p>
                        <p class="zhiye">团队技术总监</p>
                    </div>
                    <div class="detail liu">
                        <p class="name">姓名</p>
                        <div class="content">具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验</div>
                    </div>
                </li>
                <li>
                    <div class="tro liu">
                        <div class="touxiang"></div>
                        <p class="name">姓名</p>
                        <p class="zhiye">团队技术总监</p>
                    </div>
                    <div class="detail liu">
                        <p class="name">姓名</p>
                        <div class="content">具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验具有10多年的管理经验</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="friends-wrapper">
            <div class="friends-container">
                <p class="title">合作伙伴</p>
                <p class="little">1000+企业的共同选择</p>
                <div class="company-list">
                    <div class="company-img">
                        <img src="../assets/index/alibaba_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/zhejiang_university_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/wolong_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/cenergy_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/qiangelibingchuan_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/odin_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/xike_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/verna_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/tenglong_logo.png" alt="">
                    </div>
                    <div class="company-img">
                        <img src="../assets/index/lot_logo.png" alt="">
                    </div>
                </div>
                <div class="more"><span>更多合作</span></div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { Carousel, CarouselItem } from "element-ui"
import ContactButton from "../components/ContactButton"
export default {
    name: "Index",
    data() {
        return {
            hasClick: false,
            currentIndex: 0,
            titleList: ['物联网建设', '定制网站建设服务', '小程序定制化开发', '公众号定制化开发', 'APP设计与开发']
        }
    },
    components: {
        [Carousel.name]: Carousel,
        [CarouselItem.name]: CarouselItem,
        [ContactButton.name]: ContactButton
    },
    methods: {
        onJoin() {
            console.log("发送请求。。。")
        },
        listenTroHover() {
            const troLi = this.$refs.troli
            // this.hasClick == false ? troLi.setAttribute('style', 'transform:translateY(-400px);') : troLi.setAttribute('style', 'transform:translateY(0);')
            // this.hasClick = !this.hasClick;
            troLi.setAttribute('style', 'transform:translateY(-400px);')
        },
        listenTroLeave() {
            this.$refs.troli.setAttribute('style', 'transform:translateY(0);')
        },
        animationfunc() {
            let left_num = (this.currentIndex + 1) * (-976)
            this.tabUL.style.left = left_num + "px"
        },
        onLeftClick() {
            if (this.currentIndex === 0) {
                this.currentIndex = 4;
            } else {
                this.currentIndex--;
            }
            console.log(this.currentIndex)
            this.animationfunc()
        },
        onRightClick() {
            if (this.currentIndex >= 4) {
                this.currentIndex = 0;
            } else {
                this.currentIndex++;
            }
            console.log(this.currentIndex)
            this.animationfunc()
        },
        onLiClick(index) {
            this.currentIndex = index;
            this.animationfunc()
        }
    },
    mounted() {
        // let self = this;
        this.tabUL = this.$refs.tabUL;
        this.titleUL = this.$refs.titleUL;
    }
}
</script>

